<template>
	<view>
		<Header :isBack="true">
			<block slot="content">{{title}}</block>
		</Header>

		<view class="content">
			<view class="IDcard">
				<text class="IDcard-title">请上传你的身份证照片</text>
				<view class="IDcard-img">
					<view class="IDcard-img1">
						<robby-image-upload1 :src="src1" :width="width" :height="height" :lineheight="lineheight">
						</robby-image-upload1>
					</view>
					<view class="IDcard-img2">
						<robby-image-upload2 :src="src2" :width="width" :height="height" :lineheight="lineheight">
						</robby-image-upload2>
					</view>
				</view>
			</view>
			<view class="tips">
				<text class="tips-title">拍摄身份证要求：</text>
				<view class="tips-view">
					<text class="tips-view-text">大陆公民持有的本人有效二代身份证</text>
					<view class="tips-view-view">
						<text class="tips-view-view-text1">拍摄时确保身份证</text>
						<text class="tips-view-view-text2">边框完整，字体清晰，亮度均匀。</text>
						<image class="tips-view-view-img" src="@/static/images/yaoqiu.png"></image>
					</view>
				</view>
			</view>

			<view class="submit-box" @tap="submit">
				<text class="submit">
					认证申请
				</text>
			</view>
		</view>

		<!-- 底部菜单 -->
		<BottomTabbar :selected = "3"></BottomTabbar>
	</view>

</template>

<script>
	import BottomTabbar from '@/components/bottom-tabbar/bottom-tabbar.vue';
	import robbyImageUpload1 from '@/pages2/components/robby-image-upload/robby-image-upload1.vue';
	import robbyImageUpload2 from '@/pages2/components/robby-image-upload/robby-image-upload2.vue';
	export default {
		data() {
			return {
				title: '实名认证',
				isLoaded: false,

				width: '324rpx',
				height: '278rpx',
				lineheight: '278rpx',

				src1: '/static/images/zhengmian.png',
				src2: '/static/images/fanmian.png',
			}
		},
		components: {
			BottomTabbar,
			robbyImageUpload1,
			robbyImageUpload2
		},

		onLoad: function(option) {
			//判断是否登录
			let result = this.$api.isLogin();
			if (result === false) {
				return false;
			}

			let ID1 = option.ID1;
			let ID2 = option.ID2;
			this.src1 = ID1 ? ID1 : this.src1;
			this.src2 = ID2 ? ID2 : this.src2;

			uni.$on('changeID1', (option) => {
				this.src1 = option.path
			})

			uni.$on('changeID2', (option) => {
				this.src2 = option.path
			})
		},
		methods: {

			async submit() {
				let token = uni.getStorageSync('token');
				let dataObj = {
					token: token
				}
				let res = await this.$myRequest({
					url: '/authReply',
					data: dataObj,
					methods: 'post'
				})
				// console.log(res)
				if (res.data.status == 1) {
					this.$api.msg(res.data.msg, 'success', 1000);
					uni.$emit('changeStatus')

					setTimeout(() => {
						uni.navigateBack({
							url: '/pages6/pages/my/my'
						})
					}, 1000)

				} else {
					this.$api.msg(res.data.msg);
				}

			},

		}
	}
</script>

<style>
	page {
		background-color: #f7f7f7;
		font-size: 30rpx;
	}
</style>

<style lang='scss' scoped>
	.content {
		background-color: #fff;
		// #ifdef APP-PLUS
		padding: 160rpx 32rpx 120rpx;
		// #endif
		
		// #ifdef MP-WEIXIN
		padding: 160rpx 32rpx 120rpx;
		// #endif

		// #ifdef H5
		padding: 108rpx 32rpx 120rpx;
		// #endif


		.IDcard {
			width: 100%;
			height: 402rpx;
			position: relative;
			border-bottom: 1px solid #f3f3f6;

			.IDcard-title {
				height: 90rpx;
				width: 100%;
				line-height: 90rpx;
			}

			.IDcard-img {
				display: flex;
				justify-content: space-between;

				.IDcard-img1,
				.IDcard-img2 {
					height: 279rpx;
					width: 324rpx;
				}
			}
		}

		.tips {
			padding-top: 20rpx;

			.tips-title {
				height: 58rpx;
				line-height: 58rpx;

			}

			.tips-view {
				color: #939393;

				.tips-view-text {
					height: 40rpx;
					line-height: 40rpx;

				}

				.tips-view-view {

					.tips-view-view-text1,
					.tips-view-view-text2 {
						height: 40rpx;
						line-height: 40rpx;
					}

					.tips-view-view-text2 {
						color: #f3431a
					}

					.tips-view-view-img {
						padding-top: 10rpx;
						height: 149rpx;
						width: 100%;
					}
				}
			}

		}

		.submit-box {
			padding-top: 66rpx;

			.submit {
				background-color: #f3431a;
				height: 74rpx;
				border-radius: 15rpx;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

	}
</style>
